<template>
  <div class="new">
    <div class="top">
      <img src="qita/16.png" alt="" @click="fun()" />
      <span>上新精选</span>
      <img src="qita/17.png" alt="" />
    </div>
    <div class="center">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(v, i) in img" :key="i">
          <img :src="v.require" alt="" />
          <p>{{ v.word }}</p>
          <label>{{ v.test }}</label>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="bottom">
        <div class="xuan">
            <span>上新精选</span><a href="#">精选新品 闭眼放心买</a>
        </div>
        <div class="show" v-for="(v,i) in this.$store.state.jingxuan.obj" :key="i">
            <div class="left">
                <img :src="v.img">
            </div>
            <div class="right">
                <p>{{v.titel}}</p>
                <label>{{v.word}}</label>
                <a href="#">{{v.text}}</a>
                <span>￥{{v.pirce}}</span>
            </div>
        </div>
    </div>
    <div class="footer">
      <div class="head">
        <tuijian/>
      </div>
      <div class="bottom">

      </div>
    </div>
    <div class="zui">-- 更多好物，敬请期待 --
    </div>
  </div>
</template>
<script>
import tuijian from "./tuijian.vue"
export default {
  components:{
    tuijian
  },
  data() {
    return {
      img: [
        {
          require: "qita/18.png",
          word: "Ebo一宝智能陪伴机器人",
          test: "全无移动守护 家庭机器人",
        },
        {
          require: "qita/19.png",
          word: "Redmi K50 Pro",
          test: "狠超想象",
        },
        {
          require: "qita/20.png",
          word: "Redmi MAX100吋电视",
          test: "双120HZ高刷",
        },
        {
          require: "qita/21.png",
          word: "纤薄智能晾衣架",
          test: "支持米家设备互联 电动晾衣",
        },
        {
          require: "qita/22.png",
          word: "米家扫拖机器人",
          test: "大吸力 激光雷达精准导",
        },
      ],
    };
  },
  created(){
      this.$store.dispatch("jingxuan")
  },
  methods:{
    fun(){
       this.$router.push("/home");
    }
  }
  
};
</script>
<style scoped>
.new {
  width: 100%;
  height: 100%;
}
.new .top {
  width: 100%;
  height: 0.5rem;
  padding: 0.1rem;
  box-sizing: border-box;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
}
.new .top img {
  width: 0.33rem;
  height: 0.33rem;
  display: inline-block;
  color: #fff;
}
.new .top span {
  font-size: 0.16rem;
  display: inline-block;
}
.new .top i {
  display: inline-block;
  width: 0.24rem;
  height: 0.24rem;
}
.new .center .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
   display: flex;
 flex-direction: column;
 margin-bottom: -1rem;
 box-sizing: border-box;
}
.new .center img {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
}
.new .center p{
    font-size: 0.16rem;
  font-style: normal;
  margin: 0.1rem auto ;
  transform: translateY(-1.1rem);
}
.new .center label{
    font-size: 0.16rem;
    margin: 0.1rem auto ;
    transform: translateY(-1.2rem);
}
.new .bottom{
    width: 100%;
    background-color: transparent;
    padding: 0.1rem;
    box-sizing: border-box;
}
.new .bottom .xuan{
    width: 100%;
    height: 0.5rem;
    box-sizing: border-box;
    margin-top: -0.1rem;
    display: flex;
    align-items: center;
    
}
.new .bottom .xuan span{
    font-size: 0.16rem;
    font-weight: bold;
   display: inline-block;
   padding-left: 0.1rem;
}
.new .bottom .xuan a{
    font-size: 0.1rem;
    color: #666;
    display: inline-block;
    padding-left: 0.1rem;
}
.new .bottom .show{
    width: 100%;
    padding: 0.1rem;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.05rem;
    display: flex;
}
.new .bottom .show .left{
    width: 1.3rem;
    height: 1.3rem;
    background-color: #eeeeee;
    border-radius: 0.1rem;
}
.new .bottom .show .left img{
    width: 100%;
}
.new .bottom .show .right{
  display: flex;
  flex-direction: column;
  padding-left: 0.1rem;
}
.new .bottom .show .right p{
  font-size: 0.16rem;
  text-align: left;
  font-weight: bold;
}
.new .bottom .show .right label{
  font-size: 0.14rem;
  text-align: left;
  margin-top: -0.1rem;
  color: #666;
}
.new .bottom .show .right a{
  width: 0.42rem;
  font-size: 0.1rem;
  display: block;
  text-align: left;
  margin-top: 0.1rem;
  color: skyblue;
  border: 1px solid skyblue;
}
.new .bottom .show .right span{
  font-size: 0.14rem;
  display: block;
  text-align: left;
  margin-top: 0.2rem;
}
.new .zui{
  height: 1rem;
  font-size: 0.16rem;
}
</style>